<template>
	<view :class="['page',{'iphoneX':isIphoneX}]"> 
		<view class="h45">
			<view class="fix-wrap">
				<view class="search-area">
					<view class="search-form">
						<view class="icon iconfont f-s44">&#xe622;</view>
						<input type="text" confirm-type="搜索" v-model="keyword" class="sc-inp" :placeholder="searchTips" @confirm="search">
						<view v-if="keyword" class="clear-btn iconfont f-s44" @click="search(1)">&#xe724;</view>
					</view> 					 
				</view> 			 
			</view>
		</view>
		<view class="body">
			<template v-if="page=='parts'">
				<view class="list-wrap">
					<view class="parts-item" v-for="(item,index) in list" :key="item.id">
						<view class="name">{{item.pname}}</view>
						<view class="num-inp">
							<u-input type="digit" v-model="item.num" placeholder="请输入数量" ></u-input>
						</view>							
					</view>
				</view>					
			</template>
			
			<template v-if="page=='product'">
				<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading> 
				
				<template v-else>
					<view v-if="list.length>0" class="list-wrap">
						<view class="parts-item" v-for="(item,index) in list" :key="item.id" @click="select(1,index)">
							<view class="name">{{item.name}}</view>		
							<view v-if="item.id==selectItem.id" class="iconfont f-blue">&#xe637;</view>
						</view>
					</view>	
					<c-empty v-else></c-empty>
				</template>
			</template>
			
			<template v-if="page=='category'">
				<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading> 
				
				<template v-else>
					<view v-if="list.length>0" class="list-wrap">
						<view class="parts-item" v-for="(item,index) in list" :key="item.id" @click="select(1,index)">
							<view class="name">{{item.name}}</view>		
							<view v-if="item.id==selectItem.id" class="iconfont f-blue">&#xe637;</view>
						</view>
					</view>	
					<c-empty v-else></c-empty>
				</template>
			</template>
			
			<template v-if="page=='goods'||page=='shebei'">
				<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading> 
				
				<template v-else>
					<template v-if="list.length>0">
						<view class="list-wrap" style="background: none;">
							<view class="goods-item" v-for="(item,index) in list" :key="item.id" @click="select(1,index)">
								<view class="num">序号:{{(index+1)<10?('0'+(index+1)):(index+1)}}</view>
								<view class="content">
									<view class="m-b2">商品名称:{{item.pname}}</view>
									<view class="m-b2">商品编号:{{item.p_number}}</view>
									<view>规格:{{item.unit_name}}</view>
								</view>
								<!-- <view class="name">{{item.pname}}</view>		
								<view v-if="item.id==selectItem.id" class="iconfont f-blue">&#xe637;</view> -->
							</view>
						</view>	
						<c-loading :loadingState="loadingState"></c-loading>
					</template>
					<c-empty v-else></c-empty>
				</template>
			</template> 
		</view>
		 
		<c-footer v-if="page=='parts'">
			<view slot="content" class="add-btn" @click="confirm">确定</view>
		</c-footer> 
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX:getApp().globalData.isIphoneX,
				page:'' ,
				type:'',
				list:[],
				total:0,
				pageNo:1,
				tid:'',
				tname:'',
				current:null,
				keyword:'',
				loadingState:{
					default:true,
					loading:false,
					completed:false 
				},
				product:{
					categoryid:'',
					index:'',
					currentIndex:0,					
				}, 
				category:{
					index:'',
				},
				goods:{
					index:''
				},
				selectItem:{},
				searchTips:''
			}
		},
		async onLoad(params) { 
			console.log(params)
			this.page=params.page; 
			this.type=params.type;
			if(this.page=='parts'){
				this.tid=params.tid;
				this.tname=params.tname;
				if(params.current){
					this.current=JSON.parse(params.current) 
				}				
				uni.setNavigationBarTitle({
					title:'选择材料'
				})
				this.getpartslist(this.tid)
			}
			
			if(this.page=='category'){ 	 
				this.category.index=params.index;
				this.searchTips="输入类别名称";
				uni.setNavigationBarTitle({
					title:'选择类别'
				}) 
				this.productcategorylist();
			}
			
			if(this.page=='product'){
				this.product.categoryid=params.categoryid;
				this.product.index=params.index;
				this.searchTips="输入产品名称";
				uni.setNavigationBarTitle({
					title:'选择货物'
				}) 
				this.productalllist();
			}
			
			if(this.page=='goods'){ 
				this.goods.index=params.index; 
				this.searchTips="输入商品名称";
				uni.setNavigationBarTitle({
					title:'选择商品'
				}) 
				this.getproducttypelist(); 
			}
			
			if(this.page=='shebei'){
				if(this.type=='goods'){
					this.goods.index=params.index;
					this.searchTips="输入商品名称";
					uni.setNavigationBarTitle({
						title:'选择商品'
					}) 
					this.getproducttypelist(); 
				}
				if(this.type=='parts'){
					this.goods.index=params.index;
					this.searchTips="输入材料名称";
					uni.setNavigationBarTitle({
						title:'选择材料'
					}) 
					this.getproducttypelist(); 
				}
				
			}
		},
		onShow() {
			 
		},
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.pageNo=1;
				return false
			}else{
				if(this.list.length<this.total&&this.list.length>0){
					this.pageNo++; 
					if(this.page=='goods'){
						this.getproducttypelist(); 
					}					
				} 
			}	 
		},
		methods: {
			
			search(type){
				if(type&&type==1){
					this.keyword='';
				}
				if(this.page=='category'){
					this.list=[];
					this.loadingState.default=true;
					this.productcategorylist();
				}	
				
				if(this.page=='product'){
					this.list=[];
					this.loadingState.default=true;
					this.productalllist();
				}
				
				if(this.page=='goods'||this.page=='shebei'){
					this.list=[];
					this.pageNo=1;
					this.loadingState.default=true;
					this.getproducttypelist();
				}
			},
			 
			async getpartslist(tid){
				let res=await this.$api.user_api.partslist({
					typeid:tid,
					is_page:''
				});  
				if(res.data.code==200){   
					if(res.data.data.list.length>0){
						res.data.data.list.forEach(i=>{
							i.num='';
							if(this.current){
								this.current.forEach(j=>{
									if(i.id==j.parts_id){
										i.num=j.num;
									}
								}) 
							}							
						})  
						this.list=res.data.data.list;
					} 
				} 
			}, 
			
			async getproducttypelist(){
				let res=await this.$api.user_api.producttypelist({
					page: this.pageNo,
					limit: 30, 
					keyword: this.keyword,
					cate_id: '',
					is_ele:this.type=='goods'?0:1
				});    
				if(res.data.code==200){    
					this.loadingState.default=false;
					this.loadingState.loading=true;
					this.total=res.data.data.count;
					this.list=this.list.concat(res.data.data.list); 
					if(this.list.length==this.total){
						this.loadingState.loading=false;
						this.loadingState.completed=true;
					}
					
				} 
			},
			
			
			
			async productalllist(){
				let res=await this.$api.user_api.outgetproducts({
					id:this.product.categoryid 
				});   
				if(res.data.code==200){ 
					this.list=res.data.data; 
					this.loadingState.default=false; 					
				}
			}, 
			
			async productcategorylist(){ 
				let res=await this.$api.user_api.productcategorylist({
					keyword:this.keyword
				});     
				if(res.data.code==200){  
					this.list=res.data.data; 
					this.loadingState.default=false; 	
				}
			}, 
			
			select(type,idx){
				if(type==1){
					// 单选
					if(this.page=='category'){
						this.selectItem=this.list[idx];
						this.$store.commit('category_update',{
							index:this.category.index,
							data:this.selectItem
						})
						uni.navigateBack({
							delta:1
						})
					}
					
					if(this.page=='product'){
						this.selectItem=this.list[idx];
						this.$store.commit('product_update',{
							index:this.product.index,
							data:this.selectItem
						})
						uni.navigateBack({
							delta:1
						})
					}
					
					if(this.page=='goods'){
						this.selectItem=this.list[idx];
						this.$store.commit('goods_update',{
							index:this.goods.index,
							data:this.selectItem
						})
						uni.navigateBack({
							delta:1
						})
					} 
					
					if(this.page=='shebei'){
						if(this.type=='goods'){
							this.selectItem=this.list[idx];
							this.$store.commit('shebei_update',{
								index:this.goods.index,
								data:this.selectItem
							})
							uni.navigateBack({
								delta:1
							})
						}
						if(this.type=='parts'){
							this.selectItem=this.list[idx];
							this.$store.commit('shebei_parts_update',{
								index:this.goods.index,
								data:this.selectItem
							})
							uni.navigateBack({
								delta:1
							})
						}
					}
					
					
				}
			},
			
			confirm(){
				let data=null;
				if(this.page=='parts'){					
					data=[]; 
					this.list.forEach(i=>{
						let item={}
						if(i.num>0){ 
							i.parts_type=this.tid;
							i.parts_type_name=this.tname;
							data.push(i);							
						}
					})  
					this.$store.commit('parts_select',{
						parts_type:this.tid,
						data:data
					});
					uni.navigateBack({
						delta:1
					})
					
				}
			}
			
		},
		computed:{
			 
		},
		watch:{
			 
		}
		
	}
</script>

<style lang="less">
	.page,.body{
		background: #f5f5f5;
	} 
	.list-wrap{
		background: #fff;
	}
	.parts-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 20rpx 20rpx 0;
		margin: 0 0 0 30rpx;
		font-size: 30rpx;
		border-bottom: 1rpx solid #eee;
		.num-inp{
			width: 180rpx;
		}
	}
	.add-btn{
		height: 36px;
		line-height: 36px;
		width: 96%;
		margin: 5px auto;
		background: #1cab1b;
		border-radius: 8rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
	}  
	.goods-item{
		padding: 20rpx;
		margin-bottom: 20rpx;
		background: #fff;
		.num{
			margin-bottom: 20rpx;
			font-size: 30rpx;
		}
		.content{ 
			flex-grow: 2;
			font-size: 30rpx;
		}
	}
</style>
